<template>
  <div id="Application">
    <Filters
      block
      :form="searchForm"
      :filterData="filterData"
      @confirm="changePage(1)"
    />
    <div class="container">
      <a-card class="card-item">
        <count-bar :data="countData" />
        <count-bar :data="countData" />
      </a-card>
      <a-card class="card-item">
        <!-- 柱状图 -->
        <HistogramChart
          title="期间对比分析"
          :data="histogramData"
          :height="300"
          keyName="date"
          valueName="amount"
        />
      </a-card>
      <a-card>
        <PieChart
          title="占比对比分析"
          :data="pieData"
          legendPosition="bottom"
          :labelLength="8"
          :padding="[20, 0, 80, 0]"
          :height="300"
          container="overviewChart"
          keyName="companyName"
          valueName="count"
        />
      </a-card>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Watch } from 'vue-property-decorator';

@Component
export default class Task extends Vue {
  // 柱状图
  histogramData: any[] = [];
  pieData: any[] = []; // 交易总额企业占比总览饼图
  show: boolean = true;
  searchForm: any = {
    searchValue: ''
  };
  get filterData () {
    return {
      searchValue: {
        label: '关键词',
        type: 'input',
        template: {
          placeholder: '请输入关键词',
          clearable: true
        }
      }
    };
  }
  countData: any = [
    {
      name: '111',
      value: 200
    }
  ];
  init () {
    this.getList();
  }
  getCount () {
    this.$api.paymentStatisticsQueryCompanyListFetch().then((res: any) => {
      let count = this.$enums.accountData.count;
      this.countData = Object.keys(count).map((key: any) => ({
        label: count[key],
        value:
          (this.$enums.accountData[key] || {})[res.data[key]] || res.data[key]
      }));
    });
  }
  getList () {
    this.histogramData = [
      {
        date: '2020-10',
        amount: 200
      },
      {
        date: '2020-11',
        amount: 200
      }
    ];
    this.pieData = [
      {
        companyName: '1111',
        count: 20144
      },
      {
        companyName: '33322',
        count: 201000
      }
    ];
  }
  searchHandle () {
    this.getList();
  }
}
</script>

<style lang="scss" scoped>
#Application {
  .card-item {
    margin-bottom: 24px;
  }
}
</style>
